<template>
    <view class="page" hover-class="none" hover-stop-propagation="false">
        <PageHeader class="pageHeader" id="pageHeader">
            <view class="title">好未来</view>
        </PageHeader>

        <view class="main">
            <view class="_wrap">
                <view class="personModule">
                    <view class="navs p-l-r">
                        <view class="tabs">
                            <view class="tab" :class="{selected : index == currentTab}" v-for="(tab, index) in tabs" :key="index" @tap="toggleTab(index)">{{ tab.title }}</view>
                        </view>
                        <view class="filter" @tap="openFilter">筛选<LocalImage class="icon" src="filter.png" /></view>
                    </view>
                    <view class="m-t-10">
                        <template v-for="(tab, index) in tabs" :key="index">
                            <view v-if="tab.init" class="persons" :class="{active : index == currentTab}" hover-class="none" hover-stop-propagation="false">
                                <PersonItem class="person" />
                                <PersonItem class="person" />
                                <PersonItem class="person" />
                                <PersonItem class="person" />
                                <PersonItem class="person" />
                                <PersonItem class="person" />
                                <PersonItem class="person" />
                                <PersonItem class="person" />
                                <PersonItem class="person" />
                                <PersonItem class="person" />
                                <PersonItem class="person" />
                                <PersonItem class="person" />
                            </view>
                        </template>
                    </view>
                </view>
            </view>
        </view>
    </view>


    <view class="filterMask" v-if="filterVisible" :style="{top : HEIGHT + 'px'}" @tap="closeFilter"></view>
    <view class="filterpopup" v-if="filterVisible" :style="{top : HEIGHT + 'px'}" @filter="filter">
        <Filter />
    </view>

</template>

<script lang="ts" setup>
    import PageHeader from '@/components/PageHeader.vue';
    import { ref } from 'vue';
    import PersonItem from './PersonItem.vue'
    import LocalImage from '@/components/LocalImage.vue'
    import Filter from './Filter.vue'
    import { createSelectorQuery } from '@/utils/framework';

    const HEIGHT = ref(0)
    
    const currentTab = ref(0)
    const tabs = ref([
        {title : '活跃', key : 0, init : true},
        {title : '最新', key : 1, init : false},
    ])


    function toggleTab(index:number) {
        if(currentTab.value != index) {
            currentTab.value = index
            if(tabs.value[index].init == false) {
                tabs.value[index].init = true
            }
        }
    }

    const filterVisible = ref(false)
    function openFilter() {
        createSelectorQuery().select("#pageHeader").boundingClientRect(rect => {  
            HEIGHT.value = rect.height
            filterVisible.value = true
        }).exec();
        
    }

    function closeFilter() {
        filterVisible.value = false
    }


    function filter(params:any) {
        
    }

</script>

<style lang="scss" src="./index.scss"></style>